﻿<script lang="ts" setup name="appPlayerTeamStatistics">
import { ref, reactive, onMounted } from "vue";
import { auth } from '/@/utils/authFunction';
import { ElMessageBox, ElMessage } from "element-plus";
import { downloadStreamFile } from "/@/utils/download";
import { useAppPlayerTeamStatisticsApi } from '/@/api/team-statistics/appPlayerTeamStatistics';
import editDialog from '/@/views/team-statistics/appPlayerTeamStatistics/component/editDialog.vue'
import printDialog from '/@/views/system/print/component/hiprint/preview.vue'
import ModifyRecord from '/@/components/table/modifyRecord.vue';
import ImportData from "/@/components/table/importData.vue";

const appPlayerTeamStatisticsApi = useAppPlayerTeamStatisticsApi();
const printDialogRef = ref();
const editDialogRef = ref();
const importDataRef = ref();
const state = reactive({
  exportLoading: false,
  tableLoading: false,
  stores: {},
  showAdvanceQueryUI: false,
  dropdownData: {} as any,
  selectData: [] as any[],
  tableQueryParams: {} as any,
  tableParams: {
    page: 1,
    pageSize: 20,
    total: 0,
    field: 'createTime', // 默认的排序字段
    order: 'descending', // 排序方向
    descStr: 'descending', // 降序排序的关键字符
  },
  tableData: [],
});

// 页面加载时
onMounted(async () => {
  const data = await appPlayerTeamStatisticsApi.getDropdownData(true).then(res => res.data.result) ?? {};
  state.dropdownData.userId = data.userId;
  state.dropdownData.teamId = data.teamId;
});

// 查询操作
const handleQuery = async (params: any = {}) => {
  state.tableLoading = true;
  state.tableParams = Object.assign(state.tableParams, params);
  const result = await appPlayerTeamStatisticsApi.page(Object.assign(state.tableQueryParams, state.tableParams)).then(res => res.data.result);
  state.tableParams.total = result?.total;
  state.tableData = result?.items ?? [];
  state.tableLoading = false;
};

// 列排序
const sortChange = async (column: any) => {
  state.tableParams.field = column.prop;
  state.tableParams.order = column.order;
  await handleQuery();
};

// 删除
const delAppPlayerTeamStatistics = (row: any) => {
  ElMessageBox.confirm(`确定要删除吗?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    await appPlayerTeamStatisticsApi.delete({ id: row.id });
    handleQuery();
    ElMessage.success("删除成功");
  }).catch(() => {});
};

// 批量删除
const batchDelAppPlayerTeamStatistics = () => {
  ElMessageBox.confirm(`确定要删除${state.selectData.length}条记录吗?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    await appPlayerTeamStatisticsApi.batchDelete(state.selectData.map(u => ({ id: u.id }) )).then(res => {
      ElMessage.success(`成功批量删除${res.data.result}条记录`);
      handleQuery();
    });
  }).catch(() => {});
};

// 导出数据
const exportAppPlayerTeamStatisticsCommand = async (command: string) => {
  try {
    state.exportLoading = true;
    if (command === 'select') {
      const params = Object.assign({}, state.tableQueryParams, state.tableParams, { selectKeyList: state.selectData.map(u => u.id) });
      await appPlayerTeamStatisticsApi.exportData(params).then(res => downloadStreamFile(res));
    } else if (command === 'current') {
      const params = Object.assign({}, state.tableQueryParams, state.tableParams);
      await appPlayerTeamStatisticsApi.exportData(params).then(res => downloadStreamFile(res));
    } else if (command === 'all') {
      const params = Object.assign({}, state.tableQueryParams, state.tableParams, { page: 1, pageSize: 99999999 });
      await appPlayerTeamStatisticsApi.exportData(params).then(res => downloadStreamFile(res));
    }
  } finally {
    state.exportLoading = false;
  }
}
const formatYear = (row:any, column:any, cellValue:any)=> {
      if (cellValue) {
        return cellValue.split('-')[0]; // 提取年份部分
      }
      return '';
    }
handleQuery();
</script>
<template>
  <div class="appPlayerTeamStatistics-container" v-loading="state.exportLoading">
    <el-card shadow="hover" :body-style="{ paddingBottom: '0' }"> 
      <el-form :model="state.tableQueryParams" ref="queryForm" labelWidth="90">
        <el-row>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
            <el-form-item label="关键字">
              <el-input v-model="state.tableQueryParams.keyword" clearable placeholder="请输入模糊查询关键字"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="球员Id">
              <el-select clearable filterable v-model="state.tableQueryParams.userId" placeholder="请选择球员Id">
                <el-option v-for="(item,index) in state.dropdownData.userId ?? []" :key="index" :value="item.value" :label="item.label" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="球队Id">
              <el-select clearable filterable v-model="state.tableQueryParams.teamId" placeholder="请选择球队Id">
                <el-option v-for="(item,index) in state.dropdownData.teamId ?? []" :key="index" :value="item.value" :label="item.label" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="年份">
              <el-date-picker placeholder="请选择年份" type="year" value-format="YYYY/MM/DD"  v-model="state.tableQueryParams.year" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="进球数">
              <el-input-number v-model="state.tableQueryParams.goals"  clearable placeholder="请输入进球数"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="助攻数">
              <el-input-number v-model="state.tableQueryParams.assists"  clearable placeholder="请输入助攻数"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="出勤次数">
              <el-input-number v-model="state.tableQueryParams.attendances"  clearable placeholder="请输入出勤次数"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="积分">
              <el-input-number v-model="state.tableQueryParams.points"  clearable placeholder="请输入积分"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="黄牌数">
              <el-input-number v-model="state.tableQueryParams.yellowCards"  clearable placeholder="请输入黄牌数"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="红牌数">
              <el-input-number v-model="state.tableQueryParams.redCards"  clearable placeholder="请输入红牌数"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="上场时间（分钟）">
              <el-input-number v-model="state.tableQueryParams.minutesPlayed"  clearable placeholder="请输入上场时间（分钟）"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="射门次数">
              <el-input-number v-model="state.tableQueryParams.shots"  clearable placeholder="请输入射门次数"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="射正次数">
              <el-input-number v-model="state.tableQueryParams.shotsOnTarget"  clearable placeholder="请输入射正次数"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="传球次数">
              <el-input-number v-model="state.tableQueryParams.passes"  clearable placeholder="请输入传球次数"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="传球成功率">
              <el-input-number v-model="state.tableQueryParams.passAccuracy"  clearable placeholder="请输入传球成功率"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="关键传球次数">
              <el-input-number v-model="state.tableQueryParams.keyPasses"  clearable placeholder="请输入关键传球次数"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="抢断次数">
              <el-input-number v-model="state.tableQueryParams.tackles"  clearable placeholder="请输入抢断次数"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="拦截次数">
              <el-input-number v-model="state.tableQueryParams.interceptions"  clearable placeholder="请输入拦截次数"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="解围次数">
              <el-input-number v-model="state.tableQueryParams.clearances"  clearable placeholder="请输入解围次数"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="扑救次数">
              <el-input-number v-model="state.tableQueryParams.saves"  clearable placeholder="请输入扑救次数"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="扑救成功率">
              <el-input-number v-model="state.tableQueryParams.saveAccuracy"  clearable placeholder="请输入扑救成功率"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="犯规次数">
              <el-input-number v-model="state.tableQueryParams.fouls"  clearable placeholder="请输入犯规次数"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="被犯规次数">
              <el-input-number v-model="state.tableQueryParams.foulsDrawn"  clearable placeholder="请输入被犯规次数"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="越位次数">
              <el-input-number v-model="state.tableQueryParams.offsides"  clearable placeholder="请输入越位次数"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="头球争顶成功次数">
              <el-input-number v-model="state.tableQueryParams.aerialDuelsWon"  clearable placeholder="请输入头球争顶成功次数"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="评分">
              <el-input-number v-model="state.tableQueryParams.rating"  clearable placeholder="请输入评分"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10" v-if="state.showAdvanceQueryUI">
            <el-form-item label="备注">
              <el-input v-model="state.tableQueryParams.remark" clearable placeholder="请输入备注"/>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="4" class="mb10">
            <el-form-item >
              <el-button-group style="display: flex; align-items: center;">
                <el-button type="primary"  icon="ele-Search" @click="handleQuery" v-auth="'appPlayerTeamStatistics:page'" v-reclick="1000"> 查询 </el-button>
                <el-button icon="ele-Refresh" @click="() => state.tableQueryParams = {}"> 重置 </el-button>
                <el-button icon="ele-ZoomIn" @click="() => state.showAdvanceQueryUI = true" v-if="!state.showAdvanceQueryUI" style="margin-left:5px;"> 高级查询 </el-button>
                <el-button icon="ele-ZoomOut" @click="() => state.showAdvanceQueryUI = false" v-if="state.showAdvanceQueryUI" style="margin-left:5px;"> 隐藏 </el-button>
                <el-button type="danger" style="margin-left:5px;" icon="ele-Delete" @click="batchDelAppPlayerTeamStatistics" :disabled="state.selectData.length == 0" v-auth="'appPlayerTeamStatistics:batchDelete'"> 删除 </el-button>
                <el-button type="primary" style="margin-left:5px;" icon="ele-Plus" @click="editDialogRef.openDialog(null, '新增球员球队年度统计')" v-auth="'appPlayerTeamStatistics:add'"> 新增 </el-button>
                <el-dropdown :show-timeout="70" :hide-timeout="50" @command="exportAppPlayerTeamStatisticsCommand">
                  <el-button type="primary" style="margin-left:5px;" icon="ele-FolderOpened" v-reclick="20000" v-auth="'appPlayerTeamStatistics:export'"> 导出 </el-button>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="select" :disabled="state.selectData.length == 0">导出选中</el-dropdown-item>
                      <el-dropdown-item command="current">导出本页</el-dropdown-item>
                      <el-dropdown-item command="all">导出全部</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
                <el-button type="warning" style="margin-left:5px;" icon="ele-MostlyCloudy" @click="importDataRef.openDialog()" v-auth="'appPlayerTeamStatistics:import'"> 导入 </el-button>
              </el-button-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="full-table" shadow="hover" style="margin-top: 5px">
      <el-table :data="state.tableData" @selection-change="(val: any[]) => { state.selectData = val; }" style="width: 100%" v-loading="state.tableLoading" tooltip-effect="light" row-key="id" @sort-change="sortChange" border>
        <el-table-column type="selection" width="40" align="center" v-if="auth('appPlayerTeamStatistics:batchDelete') || auth('appPlayerTeamStatistics:export')" />
        <el-table-column type="index" label="序号" width="55" align="center"/>
        <el-table-column prop='userId' label='球员Id' :formatter="(row: any) => row.userFkDisplayName" show-overflow-tooltip />
        <el-table-column prop='teamId' label='球队Id' :formatter="(row: any) => row.teamFkDisplayName" show-overflow-tooltip />
        <el-table-column prop='year' label='年份' :formatter="formatYear" show-overflow-tooltip />
        <el-table-column prop='goals' label='进球数' show-overflow-tooltip />
        <el-table-column prop='assists' label='助攻数' show-overflow-tooltip />
        <el-table-column prop='attendances' label='出勤次数' show-overflow-tooltip />
        <el-table-column prop='points' label='积分' show-overflow-tooltip />
        <el-table-column prop='yellowCards' label='黄牌数' show-overflow-tooltip />
        <el-table-column prop='redCards' label='红牌数' show-overflow-tooltip />
        <el-table-column prop='minutesPlayed' label='上场时间（分钟）' show-overflow-tooltip />
        <el-table-column prop='shots' label='射门次数' show-overflow-tooltip />
        <el-table-column prop='shotsOnTarget' label='射正次数' show-overflow-tooltip />
        <el-table-column prop='passes' label='传球次数' show-overflow-tooltip />
        <el-table-column prop='passAccuracy' label='传球成功率' show-overflow-tooltip />
        <el-table-column prop='keyPasses' label='关键传球次数' show-overflow-tooltip />
        <el-table-column prop='tackles' label='抢断次数' show-overflow-tooltip />
        <el-table-column prop='interceptions' label='拦截次数' show-overflow-tooltip />
        <el-table-column prop='clearances' label='解围次数' show-overflow-tooltip />
        <el-table-column prop='saves' label='扑救次数' show-overflow-tooltip />
        <el-table-column prop='saveAccuracy' label='扑救成功率' show-overflow-tooltip />
        <el-table-column prop='fouls' label='犯规次数' show-overflow-tooltip />
        <el-table-column prop='foulsDrawn' label='被犯规次数' show-overflow-tooltip />
        <el-table-column prop='offsides' label='越位次数' show-overflow-tooltip />
        <el-table-column prop='aerialDuelsWon' label='头球争顶成功次数' show-overflow-tooltip />
        <el-table-column prop='rating' label='评分' show-overflow-tooltip />
        <el-table-column prop='remark' label='备注' show-overflow-tooltip />
        <el-table-column label="修改记录" width="100" align="center" show-overflow-tooltip>
          <template #default="scope">
            <ModifyRecord :data="scope.row" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140" align="center" fixed="right" show-overflow-tooltip v-if="auth('appPlayerTeamStatistics:update') || auth('appPlayerTeamStatistics:delete')">
          <template #default="scope">
            <el-button icon="ele-Edit" size="small" text type="primary" @click="editDialogRef.openDialog(scope.row, '编辑球员球队年度统计')" v-auth="'appPlayerTeamStatistics:update'"> 编辑 </el-button>
            <el-button icon="ele-Delete" size="small" text type="primary" @click="delAppPlayerTeamStatistics(scope.row)" v-auth="'appPlayerTeamStatistics:delete'"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination 
              v-model:currentPage="state.tableParams.page"
              v-model:page-size="state.tableParams.pageSize"
              @size-change="(val: any) => handleQuery({ pageSize: val })"
              @current-change="(val: any) => handleQuery({ page: val })"
              layout="total, sizes, prev, pager, next, jumper"
              :page-sizes="[10, 20, 50, 100, 200, 500]"
              :total="state.tableParams.total"
              size="small"
              background />
      <ImportData ref="importDataRef" :import="appPlayerTeamStatisticsApi.importData" :download="appPlayerTeamStatisticsApi.downloadTemplate" v-auth="'appPlayerTeamStatistics:import'" @refresh="handleQuery"/>
      <printDialog ref="printDialogRef" :title="'打印球员球队年度统计'" @reloadTable="handleQuery" />
      <editDialog ref="editDialogRef" @reloadTable="handleQuery" />
    </el-card>
  </div>
</template>
<style scoped>
:deep(.el-input), :deep(.el-select), :deep(.el-input-number) {
  width: 100%;
}
</style>